<template>
  <!--window 环境才形式-->
  <div class="window-footer" v-if="!IsWeb">
    <div class="update">
      <transition name="slide-fade">
        <UpdateBtn v-if="showUpdateBtn" :pram="btnPram" />
      </transition>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import UpdateBtn from "@renderer/components/buttons/update-btu/update-btu-a.vue";
import { ComBtnPojo } from "@renderer/store/components/buttons/combtu";
import { ElMessage } from "element-plus";
import { Bell } from "@element-plus/icons-vue";

const { ipcRendererChannel } = window;
const IsWeb = ref(Boolean(__ISWEB__));
const showUpdateBtn = ref(false);
const btnPram = new ComBtnPojo("", download);
const percent = ref(0);

function download() {
  ipcRendererChannel.DownloadUpdate.invoke();
}

// 检测更新
ipcRendererChannel.CheckUpdate.invoke();
ipcRendererChannel.UpdateMsg.on((event, data) => {
  switch (data.state) {
    case 1:
      showUpdateBtn.value = true;
      showMsg(true, "检测到新版本");
    case 4:
      ipcRendererChannel.ConfirmUpdate.invoke();
      break;
  }
});

ipcRendererChannel.DownloadProBar.on((event, data) => {
  showpercent();
  percent.value = data.percent;
});

function showpercent() {
  ElMessage({
    showClose: false,
    message: `${percent.value}`,
    type: "success",
    icon: Bell,
    duration: 0,
  });
}

function showMsg(open?: boolean, msg?: number | string) {
  if (!open) return;
  ElMessage({
    showClose: true,
    message: `${msg}`,
    type: "success",
    icon: Bell,
    duration: 10000,
  });
}
</script>

<style scoped lang="scss">
.window-footer {
  @include absolute_hw(40px, 100%);
  align-items: center;
  background-color: transparent;
  bottom: 0;
  z-index: 99999;
  overflow: hidden;
  .update {
    @include relative_hw(100%, 30%);
    background-color: transparent;
    overflow: hidden;
    padding-left: 7px;
    align-items: center;
  }
}

.slide-fade-enter-active {
  transition: all 2s ease;
}
.slide-fade-leave-active {
  transition: all 2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
